import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';

@Component({
  selector: 'app-autocomplete',
  templateUrl: './autocomplete.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AutocompleteComponent {
  loading = false;
  initData = ['aaa', 'bbb', 'ccc', 'ddd', 'eee'];
  data = [];
  value = '';

  constructor(private cdr: ChangeDetectorRef) {}

  change(val) {
    this.loading = true;
    setTimeout(() => {
      this.loading = false;
      this.filterData(val);
    }, 500);
  }

  valueChange(val: string): void {
    this.filterData(val);
  }

  filterData(val: string): void {
    if (val) {
      this.data = this.initData.filter(item => item.includes(val));
    } else {
      this.data = this.initData;
    }
    this.cdr.markForCheck();
  }
}
